<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>highlight.sass</title>
<meta name="generator" content="KF5::SyntaxHighlighting (SASS)"/>
</head><body style="color:#1f1c1b"><pre>
html,
body,
ul,
ol
  <span style="font-weight:bold;">margin</span>:  <span style="color:#b08000;">0</span>
  <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">0</span>

<span style="color:#ff5500;">@import</span> reset
body
  <span style="font-weight:bold;">font</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span> Helvetica, <span style="color:#b08000;">sans-serif</span>
  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#efefef</span>

<span style="color:#0057ae;">$font-stack</span>:    Helvetica, <span style="color:#b08000;">sans-serif</span>
<span style="color:#0057ae;">$primary-color</span>: <span style="color:#aa5500;">#333</span>

body
  <span style="font-weight:bold;">font</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span> <span style="color:#0057ae;">$font-stack</span>
  <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$primary-color</span>
<span style="color:#644a9b;">.container</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>

article<span style="color:#0095ff;font-weight:bold;">[role</span>=<span style="color:#bf0303;">&quot;main&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>
  <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">left</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>

<span style="color:#644a9b;font-weight:bold;">%message-shared</span>
  <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#aa5500;">#ccc</span>
  <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#333</span>

<span style="color:#644a9b;">.message</span>
  <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;font-weight:bold;">%message-shared</span>

<span style="color:#644a9b;">.success</span>
  <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;font-weight:bold;">%message-shared</span>
  <span style="font-weight:bold;">border-color</span>: <span style="color:#aa5500;">green</span>

<span style="color:#ff5500;">=</span><span style="color:#644a9b;">transform</span>(<span style="color:#0057ae;">$property</span>)
  <span style="font-weight:bold;">-webkit-transform</span>: <span style="color:#0057ae;">$property</span>
  <span style="font-weight:bold;">-ms-transform</span>: <span style="color:#0057ae;">$property</span>
  <span style="font-weight:bold;">transform</span>: <span style="color:#0057ae;">$property</span>
<span style="color:#644a9b;">.box</span>
  <span style="color:#ff5500;">+</span><span style="color:#644a9b;">transform(rotate(</span><span style="color:#b08000;">30</span><span style="color:#0057ae;">deg</span><span style="color:#644a9b;">))</span>

  <span style="color:#898887;">// This comment won't be included in the CSS.</span>
<span style="color:#898887;">   This is also commented out.</span>
  <span style="color:#006e28;font-weight:bold;">#a</span>
<span style="color:#898887;">/* But this comment will, except in compressed mode.</span>

<span style="color:#898887;">/* It can also contain interpolation:</span>
<span style="color:#898887;">   1 + 1 = #{1 + 1}</span>
<span style="color:#898887;">  1 + 1 = #{1 + 1}</span>
<span style="color:#898887;"> 1 + 1 = #{1 + 1}</span>
<span style="color:#006e28;font-weight:bold;">#a</span>

<span style="color:#898887;">// But this comment will, except in compressed mode.</span>

<span style="color:#898887;">// It can also contain interpolation:</span>
<span style="color:#898887;">   1 + 1 = #{1 + 1}</span>
<span style="color:#898887;">  1 + 1 = #{1 + 1}</span>
<span style="color:#898887;"> 1 + 1 = #{1 + 1}</span>
<span style="color:#006e28;font-weight:bold;">#a</span>

<span style="color:#898887;">/*! This comment will be included even in compressed mode.</span>

<span style="color:#006e28;font-weight:bold;">#a</span>

<span style="color:#898887;">/**/</span>

p <span style="color:#644a9b;">.sans</span>
  <span style="font-weight:bold;">font</span>: Helvetica, <span style="color:#898887;">/* Inline comments must be closed. */</span> <span style="color:#b08000;">sans-serif</span>

p <span style="color:#644a9b;">.sans</span>
  <span style="font-weight:bold;">font</span><span style="color:#898887;">/*comment*/</span>: Helvetica, <span style="color:#898887;">/* Inline comments must be closed. */</span> <span style="color:#b08000;">sans-serif</span> <span style="color:#898887;">// comment</span>

<span style="color:#898887;">/// Computes an exponent.</span>
<span style="color:#898887;">///</span>
<span style="color:#898887;">/// @param {number} $base</span>
<span style="color:#898887;">///   The number to multiply by itself.</span>
<span style="color:#898887;">/// @param {integer (unitless)} $exponent</span>
<span style="color:#898887;">///   The number of `$base`s to multiply together.</span>
<span style="color:#898887;">/// @return {number} `$base` to the power of `$exponent`.</span>
<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">pow</span>(<span style="color:#0057ae;">$base</span>, <span style="color:#0057ae;">$exponent</span>)
  <span style="color:#0057ae;">$result</span>: <span style="color:#b08000;">1</span>
  <span style="color:#ff5500;">@for</span> <span style="color:#0057ae;">$_</span> from <span style="color:#b08000;">1</span> through <span style="color:#0057ae;">$exponent</span>
    <span style="color:#0057ae;">$result</span>: <span style="color:#0057ae;">$result</span> * <span style="color:#0057ae;">$base</span>

  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$result</span>

<span style="color:#0057ae;">$roboto-font-path</span>: <span style="color:#bf0303;">&quot;../fonts/roboto&quot;</span>

<span style="color:#ff5500;">@font-face</span>
    <span style="color:#898887;">// This is parsed as a normal function call that takes a quoted string.</span>
    src: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;</span>#{<span style="color:#0057ae;">$roboto-font-path</span>}<span style="color:#bf0303;">/Roboto-Thin.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>
    src: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">$roboto-font-path + &quot;/Roboto-Light.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>
    src: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">#{$roboto-font-path}/Roboto-Regular.woff2</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>

    <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Roboto&quot;</span>
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">100</span>

<span style="color:#644a9b;">.logo</span>
  <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">800</span><span style="color:#0057ae;">px</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>
  <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>
  <span style="font-weight:bold;">left</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> - #{<span style="color:#0057ae;">$width</span> / <span style="color:#b08000;">2</span>}<span style="color:#644a9b;">)</span>
  <span style="font-weight:bold;">top</span>: <span style="color:#b08000;">0</span>

<span style="color:#0057ae;">$padding</span>: <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>

<span style="color:#644a9b;">.post</span>
  <span style="color:#898887;">// Since these max() calls don't use any Sass features other than</span>
  <span style="color:#898887;">// interpolation, they're compiled to CSS max() calls.</span>
  <span style="font-weight:bold;">padding-left</span>: <span style="color:#644a9b;">max(</span>#{<span style="color:#0057ae;">$padding</span>}, <span style="color:#644a9b;">env(</span>safe-area-inset-left<span style="color:#644a9b;">))</span>
  <span style="font-weight:bold;">padding-right</span>: <span style="color:#644a9b;">max(</span>#{<span style="color:#0057ae;">$padding</span>}, <span style="color:#644a9b;">env(</span>safe-area-inset-right<span style="color:#644a9b;">))</span>


<span style="color:#644a9b;">.sidebar</span>
  <span style="color:#898887;">// Since these refer to a Sass variable without interpolation, they call</span>
  <span style="color:#898887;">// Sass's built-in max() function.</span>
  <span style="font-weight:bold;">padding-left</span>: <span style="color:#644a9b;">max(</span><span style="color:#0057ae;">$padding</span>, <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>
  <span style="font-weight:bold;">padding-right</span>: <span style="color:#644a9b;">max(</span><span style="color:#0057ae;">$padding</span>, <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>

<span style="color:#644a9b;">.circle</span>
  <span style="color:#0057ae;">$size</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$size</span>
  <span style="font-weight:bold;">height</span>: <span style="color:#0057ae;">$size</span>
  <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">$size</span> / <span style="color:#b08000;">2</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">prefix</span>(<span style="color:#0057ae;">$property</span>, <span style="color:#0057ae;">$value</span>, <span style="color:#0057ae;">$prefixes</span>)
  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$prefix</span> in <span style="color:#0057ae;">$prefixes</span>
    -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>

  #{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>


<span style="color:#644a9b;">.gray</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">prefix(</span>filter, <span style="color:#644a9b;">grayscale(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>, moz webkit<span style="color:#644a9b;">)</span>

<span style="color:#644a9b;">.enlarge</span>
  <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">14</span><span style="color:#0057ae;">px</span>
  <span style="font-weight:bold;">transition</span>:
    <span style="font-weight:bold;">property</span>: font-size
    <span style="font-weight:bold;">duration</span>: <span style="color:#b08000;">4</span><span style="color:#0057ae;">s</span>
    <span style="font-weight:bold;">delay</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span>

  &amp;<span style="color:#b08000;font-style:italic;">:hover</span>
    <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">36</span><span style="color:#0057ae;">px</span>

<span style="color:#644a9b;">.info-page</span>
  <span style="font-weight:bold;">margin</span>: <span style="color:#644a9b;font-weight:bold;">auto</span>
    <span style="font-weight:bold;">bottom</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>
    <span style="font-weight:bold;">top</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>

<span style="color:#0057ae;">$rounded-corners</span>: <span style="color:#644a9b;font-weight:bold;">false</span>

<span style="color:#644a9b;">.button</span>
  <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#aa5500;">black</span>
  <span style="font-weight:bold;">border-radius</span>: <span style="color:#644a9b;">if(</span><span style="color:#0057ae;">$rounded-corners</span>, <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>, <span style="color:#644a9b;font-weight:bold;">null</span><span style="color:#644a9b;">)</span>

<span style="color:#0057ae;">$primary</span>: <span style="color:#aa5500;">#81899b</span>
<span style="color:#0057ae;">$accent</span>: <span style="color:#aa5500;">#ab2e</span>
<span style="color:#0057ae;">$warn</span>: <span style="color:#aa5500;">#dfa612aa</span>

<span style="color:#b08000;font-style:italic;">:root</span>
  <span style="color:#0057ae;">--primary</span>: #{<span style="color:#0057ae;">$primary</span>}
  <span style="color:#0057ae;">--accent</span>: #{<span style="color:#0057ae;">$accent</span>}
  <span style="color:#0057ae;">--warn</span>: #{<span style="color:#0057ae;">$warn</span>}

  <span style="color:#898887;">// Even though this looks like a Sass variable, it's valid CSS so it's not</span>
  <span style="color:#898887;">// evaluated.</span>
  <span style="color:#0057ae;">--consumed-by-js</span>: <span style="color:#0057ae;">$primary</span>

<span style="color:#0057ae;">$font-family-sans-serif</span>: -apple-system, BlinkMacSystemFont, <span style="color:#bf0303;">&quot;Segoe UI&quot;</span>, Roboto
<span style="color:#0057ae;">$font-family-monospace</span>: SFMono-Regular, Menlo, Monaco, Consolas

<span style="color:#b08000;font-style:italic;">:root</span>
  <span style="color:#0057ae;">--font-family-sans-serif</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-sans-serif</span><span style="color:#644a9b;">)</span>}
  <span style="color:#0057ae;">--font-family-monospace</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-monospace</span><span style="color:#644a9b;">)</span>}

<span style="color:#644a9b;">.alert</span>
  <span style="color:#898887;">// The parent selector can be used to add pseudo-classes to the outer</span>
  <span style="color:#898887;">// selector.</span>
  &amp;<span style="color:#b08000;font-style:italic;">:hover</span>
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>


  <span style="color:#898887;">// It can also be used to style the outer selector in a certain context, such</span>
  <span style="color:#898887;">// as a body set to use a right-to-left language.</span>
  <span style="color:#0095ff;font-weight:bold;">[dir</span>=<span style="color:#bf0303;">rtl</span><span style="color:#0095ff;font-weight:bold;">]</span> &amp;
    <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span>
    <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>


  <span style="color:#898887;">// You can even use it as an argument to pseudo-class selectors.</span>
  <span style="color:#b08000;font-style:italic;">:not(</span><span style="color:#bf0303;text-decoration:underline;">&amp;</span><span style="color:#b08000;font-style:italic;">)</span>
    <span style="font-weight:bold;">opacity</span>: <span style="color:#b08000;">0.8</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">unify-parent</span>(<span style="color:#0057ae;">$child</span>)
  <span style="color:#ff5500;">@at-root</span> #{<span style="color:#644a9b;">selector-unify(</span>&amp;, <span style="color:#0057ae;">$child</span><span style="color:#644a9b;">)</span>}
    <span style="color:#ff5500;">@content</span>



<span style="color:#644a9b;">.wrapper</span> <span style="color:#644a9b;">.field</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">unify-parent(</span><span style="color:#bf0303;">&quot;input&quot;</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">app-background</span>(<span style="color:#0057ae;">$color</span>)
  #{<span style="color:#644a9b;">if(</span>&amp;, <span style="color:#bf0303;">'&amp;.app-background'</span>, <span style="color:#bf0303;">'.app-background'</span><span style="color:#644a9b;">)</span>}
    <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$color</span>
    <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgba(</span><span style="color:#aa5500;">#fff</span>, <span style="color:#b08000;">0.75</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">app-background(</span><span style="color:#aa5500;">#036</span><span style="color:#644a9b;">)</span>

<span style="color:#644a9b;">.sidebar</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">app-background(</span><span style="color:#aa5500;">#c6538c</span><span style="color:#644a9b;">)</span>

<span style="color:#644a9b;">.accordion</span>
  <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>
  <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">4</span><span style="color:#0057ae;">rem</span> <span style="color:#644a9b;font-weight:bold;">auto</span>

  &amp;__copy
    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>
    <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">2</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">rem</span>
    <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.6</span>
    <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">14</span><span style="color:#0057ae;">px</span>

    &amp;--open
      <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span>


<span style="color:#644a9b;">.alert</span><span style="color:#b08000;font-style:italic;">:hover</span>, <span style="color:#644a9b;font-weight:bold;">%strong-alert</span>
  <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>

<span style="color:#644a9b;font-weight:bold;">%strong-alert</span><span style="color:#b08000;font-style:italic;">:hover</span>
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>

<span style="color:#644a9b;font-weight:bold;">%toolbelt</span>
  <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span>
  <span style="font-weight:bold;">border-top</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#aa5500;">#000</span>, <span style="color:#b08000;">.12</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">solid</span>

  &amp;<span style="color:#b08000;font-style:italic;">:hover</span>
    <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#aa5500;">#000</span>, <span style="color:#b08000;">.5</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">solid</span>

<span style="color:#644a9b;">.action-buttons</span>
  <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;font-weight:bold;">%toolbelt</span>
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#4285f4</span>

<span style="color:#0057ae;">$border-dark</span>: <span style="color:#644a9b;">rgba(</span><span style="color:#0057ae;">$base-color</span>, <span style="color:#b08000;">0.88</span><span style="color:#644a9b;">)</span>
<span style="color:#0057ae;">$black</span>: <span style="color:#aa5500;">#000</span> <span style="color:#0057ae;">!default</span>
<span style="color:#0057ae;">$border-radius</span>: <span style="color:#b08000;">0.25</span><span style="color:#0057ae;">rem</span> <span style="color:#0057ae;">!default</span>
<span style="color:#0057ae;">$box-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0.5</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">rem</span> <span style="color:#644a9b;">rgba(</span><span style="color:#0057ae;">$black</span>, <span style="color:#b08000;">0.15</span><span style="color:#644a9b;">)</span> <span style="color:#0057ae;">!default</span>
<span style="color:#0057ae;">$box-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0.5</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">rem</span> <span style="color:#644a9b;">rgba(</span><span style="color:#0057ae;">$black</span>, <span style="color:#644a9b;">blue(</span><span style="color:#0057ae;">$black</span><span style="color:#644a9b;">))</span> <span style="color:#0057ae;">!default</span>
<span style="color:#0057ae;">$border-radius</span>: <span style="color:#b08000;">0.1</span><span style="color:#0057ae;">rem</span>

<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'library'</span>

<span style="color:#0057ae;">$global-variable</span>: global value

  <span style="color:#898887;">// This would fail, because $local-variable isn't in scope:</span>
  <span style="color:#898887;">// local: $local-variable</span>

<span style="color:#0057ae;">$theme-colors</span>: (<span style="color:#bf0303;">&quot;success&quot;</span>: <span style="color:#aa5500;">#28a745</span>, <span style="color:#bf0303;">&quot;info&quot;</span>: <span style="color:#aa5500;">#17a2b8</span>, <span style="color:#bf0303;">&quot;warning&quot;</span>: <span style="color:#aa5500;">#ffc107</span>)

<span style="color:#644a9b;">.alert</span>
  <span style="color:#898887;">// Instead of $theme-color-#{warning}</span>
  <span style="font-weight:bold;">background-color</span>: <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$theme-colors</span>, <span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">corner-icon</span>(<span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$top-or-bottom</span>, <span style="color:#0057ae;">$left-or-right</span>)
  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}
    <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/icons/</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#bf0303;">.svg&quot;</span><span style="color:#644a9b;">)</span>
    <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>
    #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>
    #{<span style="color:#0057ae;">$left-or-right</span>}: <span style="color:#b08000;">0</span>

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">corner-icon(</span><span style="color:#bf0303;">&quot;mail&quot;</span>, <span style="color:#b08000;">top</span>, <span style="color:#b08000;">right</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">inline-animation</span>(<span style="color:#0057ae;">$duration</span>)
  <span style="color:#0057ae;">$name</span>: inline-#{<span style="color:#644a9b;">unique-id()</span>}

  <span style="color:#ff5500;">@keyframes</span> #{$name}
    <span style="color:#ff5500;">@content</span>

  <span style="font-weight:bold;">animation-name</span>: <span style="color:#0057ae;">$name</span>
  <span style="font-weight:bold;">animation-duration</span>: <span style="color:#0057ae;">$duration</span>
  <span style="font-weight:bold;">animation-iteration-count</span>: <span style="color:#b08000;">infinite</span>


<span style="color:#644a9b;">.pulse</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">inline-animation(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span><span style="color:#644a9b;">)</span>
    from
      <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">yellow</span>
    to
      <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">red</span>

<span style="color:#644a9b;">.example</span>
  unquoted: #{<span style="color:#bf0303;">&quot;string&quot;</span>}

  &amp; &amp;
    <span style="font-weight:bold;">padding</span>:
      <span style="font-weight:bold;">bottom</span>: <span style="color:#b08000;">0</span>
      <span style="font-weight:bold;">left</span>: <span style="color:#b08000;">0</span>

<span style="color:#898887;">// style.sass</span>
<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'foundation/code'</span>, <span style="color:#bf0303;">'foundation/lists'</span>

<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;theme.css&quot;</span>
<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;http://fonts.googleapis.com/css?family=Droid+Sans&quot;</span>
<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">theme</span><span style="color:#644a9b;">)</span>
<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;landscape&quot;</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>)

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">google-font</span>(<span style="color:#0057ae;">$family</span>)
  <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;http://fonts.googleapis.com/css?family=</span>#{<span style="color:#0057ae;">$family</span>}<span style="color:#bf0303;">&quot;</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">google-font(</span><span style="color:#bf0303;">&quot;Droid Sans&quot;</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">horizontal-list</span>
  <span style="color:#ff5500;">@include</span> reset-list

  li
    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
    <span style="font-weight:bold;">margin</span>:
      <span style="font-weight:bold;">left</span>: -<span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>
      <span style="font-weight:bold;">right</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span>

nav ul
  <span style="color:#ff5500;">@include</span> horizontal-list

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">rtl</span>(<span style="color:#0057ae;">$property</span>, <span style="color:#0057ae;">$ltr-value</span>, <span style="color:#0057ae;">$rtl-value</span>)
  #{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$ltr-value</span>

  <span style="color:#0095ff;font-weight:bold;">[dir</span>=<span style="color:#bf0303;">rtl</span><span style="color:#0095ff;font-weight:bold;">]</span> &amp;
    #{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$rtl-value</span>

<span style="color:#644a9b;">.sidebar</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">rtl(</span>float, <span style="color:#b08000;">left</span>, <span style="color:#b08000;">right</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">replace-text</span>(<span style="color:#0057ae;">$image</span>, <span style="color:#0057ae;">$x</span><span style="color:#bf0303;text-decoration:underline;">:</span> <span style="color:#bf0303;text-decoration:underline;">50%</span>, <span style="color:#0057ae;">$y</span><span style="color:#bf0303;text-decoration:underline;">:</span> <span style="color:#bf0303;text-decoration:underline;">50%</span>)
  <span style="font-weight:bold;">text-indent</span>: -<span style="color:#b08000;">99999</span><span style="color:#0057ae;">em</span>
  <span style="font-weight:bold;">overflow</span>: <span style="color:#b08000;">hidden</span>
  <span style="font-weight:bold;">text-align</span>: <span style="color:#b08000;">left</span>

  <span style="font-weight:bold;">background</span>:
    <span style="font-weight:bold;">image</span>: <span style="color:#0057ae;">$image</span>
    <span style="font-weight:bold;">repeat</span>: <span style="color:#b08000;">no-repeat</span>
    <span style="font-weight:bold;">position</span>: <span style="color:#0057ae;">$x</span> <span style="color:#0057ae;">$y</span>

<span style="color:#644a9b;">.mail-icon</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">replace-text(url(</span><span style="color:#bf0303;">&quot;/images/mail.svg&quot;</span><span style="color:#644a9b;">)</span>, <span style="color:#b08000;">0</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">order(</span><span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span>, <span style="color:#bf0303;">&quot;input.name&quot;</span>, <span style="color:#bf0303;">&quot;input.address&quot;</span>, <span style="color:#bf0303;">&quot;input.zip&quot;</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">syntax-colors</span>(<span style="color:#0057ae;">$args</span>...)
  <span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// (string: #080, comment: #800, $variable: $60b)</span>

  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$color</span> in <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>
    pre span<span style="color:#644a9b;">.stx-</span>#{<span style="color:#0057ae;">$name</span>}
      <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">syntax-colors(</span><span style="color:#0057ae;">$string</span>: <span style="color:#aa5500;">#080</span>, <span style="color:#0057ae;">$comment</span>: <span style="color:#aa5500;">#800</span>, <span style="color:#0057ae;">$variable</span>: <span style="color:#aa5500;">#60b</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">media</span>(<span style="color:#0057ae;">$types</span>...)
  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$type</span> in <span style="color:#0057ae;">$types</span>
    <span style="color:#ff5500;">@media</span> #{<span style="color:#0057ae;">$type</span>}
      <span style="color:#ff5500;">@content</span>(<span style="color:#0057ae;">$type</span>)

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">media(</span>screen, print<span style="color:#644a9b;">)</span> using (<span style="color:#0057ae;">$type</span>)
  h1
    <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>
    <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$type</span> == print
      <span style="font-weight:bold;">font-family</span>: Calluna

<span style="color:#ff5500;">=</span><span style="color:#644a9b;">reset-list</span>
  <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span>
  <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">0</span>
  <span style="font-weight:bold;">list-style</span>: <span style="color:#b08000;">none</span>

<span style="color:#ff5500;">=</span><span style="color:#644a9b;">horizontal-list</span>
  <span style="color:#ff5500;">+</span>reset-list

  li
    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
    <span style="font-weight:bold;">margin</span>:
      <span style="font-weight:bold;">left</span>: -<span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>
      <span style="font-weight:bold;">right</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span>

nav ul
  <span style="color:#ff5500;">+</span>horizontal-list
<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">pow</span>(<span style="color:#0057ae;">$base</span>, <span style="color:#0057ae;">$exponent</span>)
  <span style="color:#0057ae;">$result</span>: <span style="color:#b08000;">1</span>
  <span style="color:#ff5500;">@for</span> <span style="color:#0057ae;">$_</span> from <span style="color:#b08000;">1</span> through <span style="color:#0057ae;">$exponent</span>
    <span style="color:#0057ae;">$result</span>: <span style="color:#0057ae;">$result</span> * <span style="color:#0057ae;">$base</span>

  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$result</span>

<span style="color:#644a9b;">.sidebar</span>
  <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">left</span>
  <span style="font-weight:bold;">margin-left</span>: <span style="color:#644a9b;">pow(</span><span style="color:#b08000;">4</span>, <span style="color:#b08000;">3</span><span style="color:#644a9b;">)</span> * <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>

<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">sum</span>(<span style="color:#0057ae;">$numbers</span>...)
  <span style="color:#0057ae;">$sum</span>: <span style="color:#b08000;">0</span>
  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$number</span> in <span style="color:#0057ae;">$numbers</span>
    <span style="color:#0057ae;">$sum</span>: <span style="color:#0057ae;">$sum</span> + <span style="color:#0057ae;">$number</span>

  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$sum</span>

<span style="color:#644a9b;">.micro</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">sum(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>
<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">str-insert</span>(<span style="color:#0057ae;">$string</span>, <span style="color:#0057ae;">$insert</span>, <span style="color:#0057ae;">$index</span>)
  <span style="color:#898887;">// Avoid making new strings if we don't need to.</span>
  <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">str-length(</span><span style="color:#0057ae;">$string</span><span style="color:#644a9b;">)</span> == <span style="color:#b08000;">0</span>
    <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$insert</span>

  <span style="color:#0057ae;">$before</span>: <span style="color:#644a9b;">str-slice(</span><span style="color:#0057ae;">$string</span>, <span style="color:#b08000;">0</span>, <span style="color:#0057ae;">$index</span><span style="color:#644a9b;">)</span>
  <span style="color:#0057ae;">$after</span>: <span style="color:#644a9b;">str-slice(</span><span style="color:#0057ae;">$string</span>, <span style="color:#0057ae;">$index</span><span style="color:#644a9b;">)</span>
  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$before</span> + <span style="color:#0057ae;">$insert</span> + <span style="color:#0057ae;">$after</span>

<span style="color:#644a9b;">.error</span>
  <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#aa5500;">#f00</span>
  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#fdd</span>

  &amp;--serious
    <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.error</span>
    <span style="font-weight:bold;">border-width</span>: <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">reflexive-position</span>(<span style="color:#0057ae;">$property</span>, <span style="color:#0057ae;">$value</span>)
  <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$property</span> <span style="color:#0057ae;">!</span>= <span style="color:#b08000;">left</span> and <span style="color:#0057ae;">$property</span> <span style="color:#0057ae;">!</span>= <span style="color:#b08000;">right</span>
    <span style="color:#ff5500;">@error</span> <span style="color:#bf0303;">&quot;Property </span>#{<span style="color:#0057ae;">$property</span>}<span style="color:#bf0303;"> must be either left or right.&quot;</span>

  <span style="color:#0057ae;">$left-value</span>: <span style="color:#644a9b;">if(</span><span style="color:#0057ae;">$property</span> == <span style="color:#b08000;">right</span>, initial, <span style="color:#0057ae;">$value</span><span style="color:#644a9b;">)</span>
  <span style="color:#0057ae;">$right-value</span>: <span style="color:#644a9b;">if(</span><span style="color:#0057ae;">$property</span> == <span style="color:#b08000;">right</span>, <span style="color:#0057ae;">$value</span>, initial<span style="color:#644a9b;">)</span>

  <span style="font-weight:bold;">left</span>: <span style="color:#0057ae;">$left-value</span>
  <span style="font-weight:bold;">right</span>: <span style="color:#0057ae;">$right-value</span>
  <span style="color:#0095ff;font-weight:bold;">[dir</span>=<span style="color:#bf0303;">rtl</span><span style="color:#0095ff;font-weight:bold;">]</span> &amp;
    <span style="font-weight:bold;">left</span>: <span style="color:#0057ae;">$right-value</span>
    <span style="font-weight:bold;">right</span>: <span style="color:#0057ae;">$left-value</span>

<span style="color:#0057ae;">$known-prefixes</span>: webkit, moz, ms, o

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">prefix</span>(<span style="color:#0057ae;">$property</span>, <span style="color:#0057ae;">$value</span>, <span style="color:#0057ae;">$prefixes</span>)
  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$prefix</span> in <span style="color:#0057ae;">$prefixes</span>
    <span style="color:#ff5500;">@if</span> not <span style="color:#644a9b;">index(</span><span style="color:#0057ae;">$known-prefixes</span>, <span style="color:#0057ae;">$prefix</span><span style="color:#644a9b;">)</span>
      <span style="color:#ff5500;">@warn</span> <span style="color:#bf0303;">&quot;Unknown prefix </span>#{<span style="color:#0057ae;">$prefix</span>}<span style="color:#bf0303;">.&quot;</span>


    -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>

  #{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>


<span style="color:#644a9b;">.tilt</span>
  <span style="color:#898887;">// Oops, we typo'd &quot;webkit&quot; as &quot;wekbit&quot;!</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">prefix(</span>transform, <span style="color:#644a9b;">rotate(</span><span style="color:#b08000;">15</span><span style="color:#0057ae;">deg</span><span style="color:#644a9b;">)</span>, wekbit ms<span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">inset-divider-offset</span>(<span style="color:#0057ae;">$offset</span>, <span style="color:#0057ae;">$padding</span>)
  <span style="color:#0057ae;">$divider-offset</span>: (<span style="color:#b08000;">2</span> * <span style="color:#0057ae;">$padding</span>) + <span style="color:#0057ae;">$offset</span>
  <span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;divider offset: </span>#{<span style="color:#0057ae;">$divider-offset</span>}<span style="color:#bf0303;">&quot;</span>

  <span style="font-weight:bold;">margin-left</span>: <span style="color:#0057ae;">$divider-offset</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span> - #{<span style="color:#0057ae;">$divider-offset</span>}<span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">unify-parent</span>(<span style="color:#0057ae;">$child</span>)
  <span style="color:#ff5500;">@at-root</span> #{<span style="color:#644a9b;">selector-unify(</span>&amp;, <span style="color:#0057ae;">$child</span><span style="color:#644a9b;">)</span>}
    <span style="color:#ff5500;">@content</span>


<span style="color:#644a9b;">.square-av</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">avatar(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>, <span style="color:#0057ae;">$circle</span>: <span style="color:#644a9b;font-weight:bold;">false</span><span style="color:#644a9b;">)</span>
<span style="color:#644a9b;">.circle-av</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">avatar(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>, <span style="color:#0057ae;">$circle</span>: <span style="color:#644a9b;font-weight:bold;">true</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">theme-colors</span>(<span style="color:#0057ae;">$light-theme</span><span style="color:#bf0303;text-decoration:underline;">:</span> <span style="color:#bf0303;text-decoration:underline;">true</span>)
  <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$light-theme</span>
    <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$light-background</span>
    <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$light-text</span>
  <span style="color:#ff5500;">@else</span>
    <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$dark-background</span>
    <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$dark-text</span>

<span style="color:#644a9b;">.banner</span>
  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">theme-colors(</span><span style="color:#0057ae;">$light-theme</span>: <span style="color:#644a9b;font-weight:bold;">true</span><span style="color:#644a9b;">)</span>
  body<span style="color:#644a9b;">.dark</span> &amp;
    <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">theme-colors(</span><span style="color:#0057ae;">$light-theme</span>: <span style="color:#644a9b;font-weight:bold;">false</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">triangle</span>(<span style="color:#0057ae;">$size</span>, <span style="color:#0057ae;">$color</span>, <span style="color:#0057ae;">$direction</span>)
  <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">0</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">0</span>

  <span style="font-weight:bold;">border-color</span>: <span style="color:#b08000;">transparent</span>
  <span style="font-weight:bold;">border-style</span>: <span style="color:#b08000;">solid</span>
  <span style="font-weight:bold;">border-width</span>: <span style="color:#0057ae;">$size</span> / <span style="color:#b08000;">2</span>

  <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$direction</span> == up
    <span style="font-weight:bold;">border-bottom-color</span>: <span style="color:#0057ae;">$color</span>
  <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$direction</span> == <span style="color:#b08000;">right</span>
    <span style="font-weight:bold;">border-left-color</span>: <span style="color:#0057ae;">$color</span>
  <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$direction</span> == down
    <span style="font-weight:bold;">border-top-color</span>: <span style="color:#0057ae;">$color</span>
  <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$direction</span> == <span style="color:#b08000;">left</span>
    <span style="font-weight:bold;">border-right-color</span>: <span style="color:#0057ae;">$color</span>
  <span style="color:#ff5500;">@else</span>
    <span style="color:#ff5500;">@error</span> <span style="color:#bf0303;">&quot;Unknown direction </span>#{<span style="color:#0057ae;">$direction</span>}<span style="color:#bf0303;">.&quot;</span>

<span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$size</span> in <span style="color:#0057ae;">$sizes</span>
  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$size</span>}
    <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$size</span>
    <span style="font-weight:bold;">height</span>: <span style="color:#0057ae;">$size</span>
    <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$size</span>

<span style="color:#0057ae;">$icons</span>: (<span style="color:#bf0303;">&quot;eye&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#bf0303;">&quot;</span>, <span style="color:#bf0303;">&quot;start&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#bf0303;">&quot;</span>, <span style="color:#bf0303;">&quot;stop&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#bf0303;">&quot;</span>)

<span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$glyph</span> in <span style="color:#0057ae;">$icons</span>
  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#b08000;font-style:italic;">:before</span>
    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
    <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Icon Font&quot;</span>
    <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">$glyph</span>

<span style="color:#0057ae;">$icons</span>: <span style="color:#bf0303;">&quot;eye&quot;</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#bf0303;">&quot;</span> <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>, <span style="color:#bf0303;">&quot;start&quot;</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#bf0303;">&quot;</span> <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span>, <span style="color:#bf0303;">&quot;stop&quot;</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#bf0303;">&quot;</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>

<span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$glyph</span>, <span style="color:#0057ae;">$size</span> in <span style="color:#0057ae;">$icons</span>
  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#b08000;font-style:italic;">:before</span>
    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
    <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Icon Font&quot;</span>
    <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">$glyph</span>
    <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$size</span>

<span style="color:#ff5500;">@for</span> <span style="color:#0057ae;">$i</span> from <span style="color:#b08000;">1</span> through <span style="color:#b08000;">3</span>
  ul<span style="color:#b08000;font-style:italic;">:nth-child(3n + #{$i})</span>
    <span style="font-weight:bold;">background-color</span>: <span style="color:#644a9b;">lighten(</span><span style="color:#0057ae;">$base-color</span>, <span style="color:#0057ae;">$i</span> * <span style="color:#b08000;">5</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>

<span style="color:#898887;">/// Divides `$value` by `$ratio` until it's below `$base`.</span>
<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">scale-below</span>(<span style="color:#0057ae;">$value</span>, <span style="color:#0057ae;">$base</span>, <span style="color:#0057ae;">$ratio</span><span style="color:#bf0303;text-decoration:underline;">:</span> <span style="color:#bf0303;text-decoration:underline;">1.618</span>)
  <span style="color:#ff5500;">@while</span> <span style="color:#0057ae;">$value</span> &gt; <span style="color:#0057ae;">$base</span>
    <span style="color:#0057ae;">$value</span>: <span style="color:#0057ae;">$value</span> / <span style="color:#0057ae;">$ratio</span>
  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$value</span>

<span style="color:#ff5500;">@namespace</span> svg <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/2000/svg</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@font-face</span>
  <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Open Sans&quot;</span>
  src: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>

<span style="color:#ff5500;">@counter-style</span> thumbs
  system: cyclic
  symbols: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#bf0303;">&quot;</span>

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">sticky-position</span>
  <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">fixed</span>
  <span style="color:#ff5500;">@supports</span> (<span style="font-weight:bold;">position</span>: sticky)
    <span style="font-weight:bold;">position</span>: sticky

<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">hover</span>: <span style="color:#b08000;">hover</span>)
  <span style="color:#644a9b;">.button</span><span style="color:#b08000;font-style:italic;">:hover</span>
    <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#aa5500;">black</span>

    <span style="color:#ff5500;">@media</span> (<span style="color:#b08000;">color</span>)
      <span style="font-weight:bold;">border-color</span>: <span style="color:#aa5500;">#036</span>

<span style="color:#ff5500;">@keyframes</span> slide-in
  from
    <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>
    <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>


  70%
    <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">90</span><span style="color:#0057ae;">%</span>
    <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">%</span>


  to
    <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>
    <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">100</span>  <span style="color:#898887;">// 100</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">0.8</span>  <span style="color:#898887;">// 0.8</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 16px</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 10px*px (read &quot;square pixels&quot;)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5.2e3</span>  <span style="color:#898887;">// 5200</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">6e-2</span>  <span style="color:#898887;">// 0.06</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">6</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 24px*px (read &quot;square pixels&quot;)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// 2.5px/s (read &quot;pixels per second&quot;)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">30</span><span style="color:#0057ae;">deg</span> / <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span> / <span style="color:#b08000;">24</span><span style="color:#0057ae;">em</span>  <span style="color:#898887;">// 3.125px*deg/s*em</span>
<span style="color:#898887;">//                                 (read &quot;pixel-degrees per second-em&quot;)</span>

<span style="color:#0057ae;">$degrees-per-second</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">deg</span>/<span style="color:#b08000;">1</span><span style="color:#0057ae;">s</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$degrees-per-second</span>  <span style="color:#898887;">// 20deg/s</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span> / <span style="color:#0057ae;">$degrees-per-second</span>  <span style="color:#898887;">// 0.05s/deg</span>
<span style="color:#0057ae;">$transition-speed</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">s</span>/<span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">unquote(</span><span style="color:#bf0303;">&quot;.widget:hover&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// .widget:hover</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">quote(</span><span style="color:#b08000;">bold</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// &quot;bold&quot;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">0.012345678912345</span>  <span style="color:#898887;">// 0.0123456789</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">0.01234567891</span> == <span style="color:#b08000;">0.01234567899</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1.00000000009</span>  <span style="color:#898887;">// 1</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">0.99999999991</span>  <span style="color:#898887;">// 1</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\&quot;</span><span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// '&quot;'</span>
<span style="color:#ff5500;">@debug</span> \.widget  <span style="color:#898887;">// \.widget</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\a</span><span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// &quot;\a&quot; (a string containing only a newline)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;line1</span><span style="color:#3daee9;">\a</span><span style="color:#bf0303;"> line2&quot;</span>  <span style="color:#898887;">// &quot;line1\a line2&quot; (foo and bar are separated by a newline)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Nat + Liz </span><span style="color:#3daee9;">\1F46D</span><span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// &quot;Nat + Liz 👭&quot;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>  <span style="color:#898887;">// &quot;Helvetica Neue&quot;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;C:</span><span style="color:#3daee9;">\\</span><span style="color:#bf0303;">Program Files&quot;</span>  <span style="color:#898887;">// &quot;C:\\Program Files&quot;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\&quot;</span><span style="color:#bf0303;">Don't Fear the Reaper</span><span style="color:#3daee9;">\&quot;</span><span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// &quot;\&quot;Don't Fear the Reaper\&quot;&quot;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;line1</span><span style="color:#3daee9;">\a</span><span style="color:#bf0303;"> line2&quot;</span>  <span style="color:#898887;">// &quot;line1\a line2&quot;</span>

<span style="color:#0057ae;">$roboto-variant</span>: <span style="color:#bf0303;">&quot;Mono&quot;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Roboto </span>#{<span style="color:#0057ae;">$roboto-variant</span>}<span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// &quot;Roboto Mono&quot;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">bold</span>  <span style="color:#898887;">// bold</span>
<span style="color:#ff5500;">@debug</span> -webkit-flex  <span style="color:#898887;">// -webkit-flex</span>
<span style="color:#ff5500;">@debug</span> --<span style="color:#b08000;">123</span>  <span style="color:#898887;">// --123</span>

<span style="color:#0057ae;">$prefix</span>: ms
<span style="color:#ff5500;">@debug</span> -#{<span style="color:#0057ae;">$prefix</span>}-flex  <span style="color:#898887;">// -ms-flex</span>
<span style="color:#ff5500;">@debug</span> \1F46D  <span style="color:#898887;">// 👭</span>
<span style="color:#ff5500;">@debug</span> \21  <span style="color:#898887;">// \!</span>
<span style="color:#ff5500;">@debug</span> \7Fx  <span style="color:#898887;">// \7f x</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-length(</span>\7Fx<span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 5</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Helvetica&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 1</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Neue&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 11</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-slice(</span><span style="color:#bf0303;">&quot;Roboto Mono&quot;</span>, -<span style="color:#b08000;">4</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// &quot;Mono&quot;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#aa5500;">#f2ece4</span> <span style="color:#898887;">// #f2ece4</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#aa5500;">#b37399aa</span> <span style="color:#898887;">// rgba(179, 115, 153, 67%)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#aa5500;">midnightblue</span> <span style="color:#898887;">// #191970</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">rgb(</span><span style="color:#b08000;">204</span>, <span style="color:#b08000;">102</span>, <span style="color:#b08000;">153</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// #c69</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">107</span>, <span style="color:#b08000;">113</span>, <span style="color:#b08000;">127</span>, <span style="color:#b08000;">0.8</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// rgba(107, 113, 127, 0.8)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">hsl(</span><span style="color:#b08000;">228</span>, <span style="color:#b08000;">7</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">86</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// #dadbdf</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">hsla(</span><span style="color:#b08000;">20</span>, <span style="color:#b08000;">20</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">85</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">0.7</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// rgb(225, 215, 210, 0.7)</span>
<span style="color:#0057ae;">$venus</span>: <span style="color:#aa5500;">#998099</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">scale-color(</span><span style="color:#0057ae;">$venus</span>, <span style="color:#0057ae;">$lightness</span>: +<span style="color:#b08000;">15</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// #a893a8</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">mix(</span><span style="color:#0057ae;">$venus</span>, <span style="color:#aa5500;">midnightblue</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// #594d85</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">nth(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">2</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 12px</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">nth(</span>[line1, line2, line3], -<span style="color:#b08000;">1</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// line3</span>
<span style="color:#0057ae;">$prefixes-by-browser</span>: (<span style="color:#bf0303;">&quot;firefox&quot;</span>: moz, <span style="color:#bf0303;">&quot;safari&quot;</span>: webkit, <span style="color:#bf0303;">&quot;ie&quot;</span>: ms)

<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">prefixes-for-browsers</span>(<span style="color:#0057ae;">$browsers</span>)
  <span style="color:#0057ae;">$prefixes</span>: ()
  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$browser</span> in <span style="color:#0057ae;">$browsers</span>
    <span style="color:#0057ae;">$prefixes</span>: <span style="color:#644a9b;">append(</span><span style="color:#0057ae;">$prefixes</span>, <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$prefixes-by-browser</span>, <span style="color:#0057ae;">$browser</span><span style="color:#644a9b;">))</span>

  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$prefixes</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">prefixes-for-browsers(</span><span style="color:#bf0303;">&quot;firefox&quot;</span> <span style="color:#bf0303;">&quot;ie&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// moz ms</span>
<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">syntax-colors</span>(<span style="color:#0057ae;">$args</span>...)
  <span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// (string: #080, comment: #800, $variable: $60b)</span>

  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$color</span> in <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>
    pre span<span style="color:#644a9b;">.stx-</span>#{<span style="color:#0057ae;">$name</span>}
      <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">syntax-colors(</span><span style="color:#0057ae;">$string</span>: <span style="color:#aa5500;">#080</span>, <span style="color:#0057ae;">$comment</span>: <span style="color:#aa5500;">#800</span>, <span style="color:#0057ae;">$variable</span>: <span style="color:#aa5500;">#60b</span><span style="color:#644a9b;">)</span>;
<span style="color:#0057ae;">$font-weights</span>: (<span style="color:#bf0303;">&quot;regular&quot;</span>: <span style="color:#b08000;">400</span>, <span style="color:#bf0303;">&quot;medium&quot;</span>: <span style="color:#b08000;">500</span>, <span style="color:#bf0303;">&quot;bold&quot;</span>: <span style="color:#b08000;">700</span>)

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$font-weights</span>, <span style="color:#bf0303;">&quot;medium&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 500</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$font-weights</span>, <span style="color:#bf0303;">&quot;extra-bold&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// null</span>
<span style="color:#0057ae;">$icons</span>: (<span style="color:#bf0303;">&quot;eye&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#bf0303;">&quot;</span>, <span style="color:#bf0303;">&quot;start&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#bf0303;">&quot;</span>, <span style="color:#bf0303;">&quot;stop&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#bf0303;">&quot;</span>)

<span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$glyph</span> in <span style="color:#0057ae;">$icons</span>
  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#b08000;font-style:italic;">:before</span>
    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
    <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Icon Font&quot;</span>
    <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">$glyph</span>

<span style="color:#0057ae;">$prefixes-by-browser</span>: (<span style="color:#bf0303;">&quot;firefox&quot;</span>: moz, <span style="color:#bf0303;">&quot;safari&quot;</span>: webkit, <span style="color:#bf0303;">&quot;ie&quot;</span>: ms)

<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">add-browser-prefix</span>(<span style="color:#0057ae;">$browser</span>, <span style="color:#0057ae;">$prefix</span>)
  <span style="color:#0057ae;">$prefixes-by-browser</span>: <span style="color:#644a9b;">map-merge(</span><span style="color:#0057ae;">$prefixes-by-browser</span>, (<span style="color:#0057ae;">$browser</span>: <span style="color:#0057ae;">$prefix</span><span style="color:#644a9b;">)</span>)

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">add-browser-prefix(</span><span style="color:#bf0303;">&quot;opera&quot;</span>, o<span style="color:#644a9b;">)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$prefixes-by-browser</span>
<span style="color:#898887;">// (&quot;firefox&quot;: moz, &quot;safari&quot;: webkit, &quot;ie&quot;: ms, &quot;opera&quot;: o)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> == <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// false</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> == <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> &lt; <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// false</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">comparable(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">3</span><span style="color:#0057ae;">in</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Roboto&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// null</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">map-get(</span>(<span style="color:#bf0303;">&quot;large&quot;</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>, <span style="color:#bf0303;">&quot;small&quot;</span>)  <span style="color:#898887;">// null</span>
<span style="color:#ff5500;">@debug</span> &amp;  <span style="color:#898887;">// null</span>
<span style="color:#0057ae;">$fonts</span>: (<span style="color:#bf0303;">&quot;serif&quot;</span>: <span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;monospace&quot;</span>: <span style="color:#bf0303;">&quot;Consolas&quot;</span>)

h3
  <span style="font-weight:bold;">font</span>: <span style="color:#b08000;">18</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">bold</span> <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$fonts</span>, <span style="color:#bf0303;">&quot;sans&quot;</span><span style="color:#644a9b;">)</span>

<span style="color:#0057ae;">$fonts</span>: (<span style="color:#bf0303;">&quot;serif&quot;</span>: <span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;monospace&quot;</span>: <span style="color:#bf0303;">&quot;Consolas&quot;</span>)

h3
  <span style="font-weight:bold;">font</span>:
    <span style="font-weight:bold;">size</span>: <span style="color:#b08000;">18</span><span style="color:#0057ae;">px</span>
    <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span>
    <span style="font-weight:bold;">family</span>: <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$fonts</span>, <span style="color:#bf0303;">&quot;sans&quot;</span><span style="color:#644a9b;">)</span>

copy of $list with all elements for which $condition returns `true`
<span style="color:#898887;">/// removed.</span>
<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">remove-where</span>(<span style="color:#0057ae;">$list</span>, <span style="color:#0057ae;">$condition</span>)
  <span style="color:#0057ae;">$new-list</span>: ()
  <span style="color:#0057ae;">$separator</span>: <span style="color:#644a9b;">list-separator(</span><span style="color:#0057ae;">$list</span><span style="color:#644a9b;">)</span>
  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$element</span> in <span style="color:#0057ae;">$list</span>
    <span style="color:#ff5500;">@if</span> not <span style="color:#644a9b;">call(</span><span style="color:#0057ae;">$condition</span>, <span style="color:#0057ae;">$element</span><span style="color:#644a9b;">)</span>
      <span style="color:#0057ae;">$new-list</span>: <span style="color:#644a9b;">append(</span><span style="color:#0057ae;">$new-list</span>, <span style="color:#0057ae;">$element</span>, <span style="color:#0057ae;">$separator</span>: <span style="color:#0057ae;">$separator</span><span style="color:#644a9b;">)</span>

  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$new-list</span>

<span style="color:#0057ae;">$fonts</span>: Tahoma, Geneva, <span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, Helvetica, Arial, <span style="color:#b08000;">sans-serif</span>

content
  <span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">contains-helvetica</span>(<span style="color:#0057ae;">$string</span>)
    <span style="color:#ff5500;">@return</span> <span style="color:#644a9b;">str-index(</span><span style="color:#0057ae;">$string</span>, <span style="color:#bf0303;">&quot;Helvetica&quot;</span><span style="color:#644a9b;">)</span>

  <span style="font-weight:bold;">font-family</span>: <span style="color:#644a9b;">remove-where(</span><span style="color:#0057ae;">$fonts</span>, <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;contains-helvetica&quot;</span><span style="color:#644a9b;">))</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> == <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!</span>= <span style="color:#b08000;">1</span><span style="color:#0057ae;">em</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span> <span style="color:#0057ae;">!</span>= <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">96</span><span style="color:#0057ae;">px</span> == <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span>  <span style="color:#898887;">// true</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Helvetica&quot;</span> == Helvetica  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Helvetica&quot;</span> <span style="color:#0057ae;">!</span>= <span style="color:#bf0303;">&quot;Arial&quot;</span>  <span style="color:#898887;">// true</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">hsl(</span><span style="color:#b08000;">34</span>, <span style="color:#b08000;">35</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">92.1</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span> == <span style="color:#aa5500;">#f2ece4</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">179</span>, <span style="color:#b08000;">115</span>, <span style="color:#b08000;">153</span>, <span style="color:#b08000;">0.5</span><span style="color:#644a9b;">)</span> <span style="color:#0057ae;">!</span>= <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">179</span>, <span style="color:#b08000;">115</span>, <span style="color:#b08000;">153</span>, <span style="color:#b08000;">0.8</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>

<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>) == (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>) <span style="color:#0057ae;">!</span>= (<span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">14</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>) <span style="color:#0057ae;">!</span>= (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>) <span style="color:#0057ae;">!</span>= [<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>]  <span style="color:#898887;">// true</span>

<span style="color:#0057ae;">$theme</span>: (<span style="color:#bf0303;">&quot;venus&quot;</span>: <span style="color:#aa5500;">#998099</span>, <span style="color:#bf0303;">&quot;nebula&quot;</span>: <span style="color:#aa5500;">#d2e1dd</span>)
<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$theme</span> == (<span style="color:#bf0303;">&quot;venus&quot;</span>: <span style="color:#aa5500;">#998099</span>, <span style="color:#bf0303;">&quot;nebula&quot;</span>: <span style="color:#aa5500;">#d2e1dd</span>)  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$theme</span> <span style="color:#0057ae;">!</span>= (<span style="color:#bf0303;">&quot;venus&quot;</span>: <span style="color:#aa5500;">#998099</span>, <span style="color:#bf0303;">&quot;iron&quot;</span>: <span style="color:#aa5500;">#dadbdf</span>)  <span style="color:#898887;">// true</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> == <span style="color:#644a9b;font-weight:bold;">true</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> <span style="color:#0057ae;">!</span>= <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">null</span> <span style="color:#0057ae;">!</span>= <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// true</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;rgba&quot;</span><span style="color:#644a9b;">)</span> == <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;rgba&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;rgba&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#0057ae;">!</span>= <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;hsla&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">s</span> + <span style="color:#b08000;">15</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// 25s</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span> - <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 0.8958333333in</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 15px*px</span>
<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// 3</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span> % <span style="color:#b08000;">9</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 0.0625in</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 15px/30px</span>
<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> + <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>) / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 0.5</span>

<span style="color:#0057ae;">$result</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$result</span>  <span style="color:#898887;">// 0.5</span>

<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">fifteen-divided-by-thirty</span>()
  <span style="color:#ff5500;">@return</span> <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">fifteen-divided-by-thirty()</span>  <span style="color:#898887;">// 0.5</span>

<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// 0.5</span>
<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">bold</span> <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">sans-serif</span>)  <span style="color:#898887;">// bold 15px/30px sans-serif</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span> + <span style="color:#b08000;">1</span>  <span style="color:#898887;">// 1.5</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">6</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 24px*px (read &quot;square pixels&quot;)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// 2.5px/s (read &quot;pixels per second&quot;)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">30</span><span style="color:#0057ae;">deg</span> / <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span> / <span style="color:#b08000;">24</span><span style="color:#0057ae;">em</span>  <span style="color:#898887;">// 3.125px*deg/s*em</span>
<span style="color:#898887;">//                                 (read &quot;pixel-degrees per second-em&quot;)</span>

<span style="color:#0057ae;">$degrees-per-second</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">deg</span>/<span style="color:#b08000;">1</span><span style="color:#0057ae;">s</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$degrees-per-second</span>  <span style="color:#898887;">// 20deg/s</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span> / <span style="color:#0057ae;">$degrees-per-second</span>  <span style="color:#898887;">// 0.05s/deg</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">100</span> &gt; <span style="color:#b08000;">50</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> &lt; <span style="color:#b08000;">17</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">96</span><span style="color:#0057ae;">px</span> &gt;= <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1000</span><span style="color:#0057ae;">ms</span> &lt;= <span style="color:#b08000;">1</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Helvetica&quot;</span> + <span style="color:#bf0303;">&quot; Neue&quot;</span>  <span style="color:#898887;">// &quot;Helvetica Neue&quot;</span>
<span style="color:#ff5500;">@debug</span> sans- + <span style="color:#b08000;">serif</span>  <span style="color:#898887;">// sans-serif</span>
<span style="color:#ff5500;">@debug</span> #{<span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> + <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>} / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 15px/30px</span>
<span style="color:#ff5500;">@debug</span> sans - <span style="color:#b08000;">serif</span>  <span style="color:#898887;">// sans-serif</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Elapsed time: &quot;</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// &quot;Elapsed time: 10s&quot;;</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> + <span style="color:#bf0303;">&quot; is a boolean value&quot;</span>  <span style="color:#898887;">// &quot;true is a boolean value&quot;;</span>

<span style="color:#ff5500;">@debug</span> / <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// /15px</span>
<span style="color:#ff5500;">@debug</span> - moz  <span style="color:#898887;">// -moz</span>
<span style="color:#ff5500;">@debug</span> <span style="font-weight:bold;">not</span> <span style="color:#644a9b;font-weight:bold;">true</span>  <span style="color:#898887;">// false</span>
<span style="color:#ff5500;">@debug</span> <span style="font-weight:bold;">not</span> <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// true</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> <span style="font-weight:bold;">and</span> <span style="color:#644a9b;font-weight:bold;">true</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> <span style="font-weight:bold;">and</span> <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// false</span>

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> or <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">false</span> or <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// false</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--main-bg-color</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// var(--main-bg-color)</span>

<span style="color:#0057ae;">$primary</span>: <span style="color:#aa5500;">#f2ece4</span>
<span style="color:#0057ae;">$accent</span>: <span style="color:#aa5500;">#e1d7d2</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">radial-gradient(</span><span style="color:#0057ae;">$primary</span>, <span style="color:#0057ae;">$accent</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// radial-gradient(#f2ece4, #e1d7d2)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Helvetica&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 1</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Neue&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 11</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">comparable(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">comparable(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">3</span><span style="color:#0057ae;">em</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// false</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">comparable(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">cm</span>, <span style="color:#b08000;">3</span><span style="color:#0057ae;">mm</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 10px 20px 30px</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span>(<span style="color:#aa5500;">blue</span>, <span style="color:#aa5500;">red</span><span style="color:#644a9b;">)</span>, <span style="color:#aa5500;">green</span>)  <span style="color:#898887;">// blue, red, green</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 10px 20px (30px 40px)</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>, <span style="color:#0057ae;">$separator</span>: comma<span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 10px, 20px</span>
<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span>(<span style="color:#aa5500;">blue</span>, <span style="color:#aa5500;">red</span><span style="color:#644a9b;">)</span>, <span style="color:#aa5500;">green</span>, <span style="color:#0057ae;">$separator</span>: space)  <span style="color:#898887;">// blue red green</span>
<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">syntax-colors</span>(<span style="color:#0057ae;">$args</span>...)
  <span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// (string: #080, comment: #800, $variable: $60b)</span>

  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$color</span> in <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>
    pre span<span style="color:#644a9b;">.stx-</span>#{<span style="color:#0057ae;">$name</span>}
      <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>

<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">syntax-colors(</span><span style="color:#0057ae;">$string</span>: <span style="color:#aa5500;">#080</span>, <span style="color:#0057ae;">$comment</span>: <span style="color:#aa5500;">#800</span>, <span style="color:#0057ae;">$variable</span>: <span style="color:#aa5500;">#60b</span><span style="color:#644a9b;">)</span>;

<span style="color:#0057ae;">$font-weights</span>: (<span style="color:#bf0303;">&quot;regular&quot;</span>: <span style="color:#b08000;">400</span>, <span style="color:#bf0303;">&quot;medium&quot;</span>: <span style="color:#b08000;">500</span>, <span style="color:#bf0303;">&quot;bold&quot;</span>: <span style="color:#b08000;">700</span>)

<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">map-values(</span><span style="color:#0057ae;">$font-weights</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 400, 500, 700</span>

<span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}
  <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>
  #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>
  -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>
  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}
    <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>
    #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>
    -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}-image: <span style="color:#0057ae;">$value</span>
</pre></body></html>
